<template lang='pug'>
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 日期：
          DatePicker(v-model="searchData.date" type="date" placeholder="请选择日期" clearable @on-change="dateChange")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 姓名：
          Input(v-model="searchData.name" placeholder="请输入" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          Button.ml-15(v-if="hasFind" type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData" @on-selection-change="tableSelectChange")
        div(slot="header")
          .pull-left.table-title-lefttxt
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
              | 条
          .pull-right.table-title-btns
            Button.mr-15(v-if="hasExport" type="info" @click="exportBtn") 导出
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="totalRows" :current="searchData.PageIndex" :page-size="searchData.PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
</template>

<script>
import ServideApi from './service.js'

export default {
  name:'hrdc-clues-basedata',
  props:{},
  data () {
    return {
      ids: '',
      searchData: {
        date: new Date(),
        name: '',
        PageIndex: 1,
        PageSize: 10
      },
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          minWidth: 150,
          align: 'center',
          key: 'name'
        },
        {
          title: '周录入线索统计',
          minWidth: 150,
          align: 'center',
          key: 'weekCustomerCount'
        },
        {
          title: '月录入线索统计',
          minWidth: 150,
          align: 'center',
          key: 'monthCustomerCount'
        },
        {
          title: '月度被拾取潜在客户数量',
          minWidth: 150,
          align: 'center',
          key: 'monthBudgetCount'
        },
        // {
        //   title: '操作',
        //   minWidth: 150,
        //   align: 'center',
        //   slot: 'action',
        // },
      ],
      loading: false,
      listData: [],
      totalRows: 0,
    };
  },

  components: {
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 导出
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
  },

  beforeMount() {},

  mounted() {
    this.getList()
  },

  methods: {
    getList () {
      this.loading = true
      ServideApi.GetClueDevelopStatList(this.searchData).then(res => {
        this.loading = false
        console.log(res)
        if (res.data.success) {
          this.listData = res.data.data
          this.totalRows = res.data.totalRows
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    searchBtn () {
      this.searchData.PageIndex = 1
      this.getList()
    },
    tableSelectChange (val) {
      console.log(val)
      let arr = val.map(_ => {
        return _.id
      })
      this.ids = arr.join(',')
    },
    pageChangeFn (val) {
      this.searchData.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.searchData.PageSize = val
      this.getList()
    },
    dateChange (val) {
      this.searchData.date = val
    },
    exportBtn () {
      ServideApi.ExportClueDevelopStat({
        ...this.searchData,
        ids: this.ids,
      }).then(res => {
        if (res.data.success) {
          let objectUrl = res.data.data
          const link = document.createElement('a')
          link.download = ''
          link.href = objectUrl
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
  },

  watch: {}

}

</script>

<style lang='less'>
  .ivu-select.ivu-select-disabled{
    .ivu-select-selection{
      color: #333;
    }
  }
  .ivu-input[disabled] {
    color: #333;
  }
</style>